import React, { useEffect, useState } from 'react'
import "./Subject.less"
import { useNavigate } from 'react-router-dom';
import { SwitchApi, SubjectApi, HomeApi, MoRenApi } from '@/request/api';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';
import { useParams } from 'react-router-dom'
export default function Subject() {
    let nav = useNavigate()
    let params = useParams()
    let [bool, setBool] = useState(false)
    let [switchData, switchDataVal] = useState([])//左侧边栏
    let [subjectData, subjectDataVal] = useState([])//下面列表
    let [title, setTitle] = useState("") //学科名

    let [code, setCode] = useState("")

    const getSwitch = async () => {
        let res = await SwitchApi()
        // console.log(res);
        switchDataVal(res.data)
        setCode(params.code!)//当前学科
    }//快速刷题


    const getHome = async () => {
        let res = await HomeApi()
        // console.log(res);
        setTitle(res.data.exam.title)
    }//首页


    //页面参数
    const index = async () => {
        // console.log(params.code);
        let a = String(params.code)
        let res = await SubjectApi({
            actionCode: a
        })
        // console.log(res);
        subjectDataVal(res.data)
    }

    useEffect(() => {
        index()
        getSwitch()
        getHome()
    }, [])

    return (
        <div className='subject'>
            <div className='shang'>
                <div className='top'>
                    <div className='zuo'>
                        默认学科—{title}
                    </div>
                    <div className='you' onClick={async () => {
                        console.log(code);
                        let res = await MoRenApi(
                            code!
                        )
                        console.log(res);
                        nav("/home")
                    }}>
                        设置默认学科<ArrowRightIcon></ArrowRightIcon>
                    </div>
                </div>
                <div className='title' onClick={() => {
                    // getSwitch()
                    setBool(!bool)
                    // console.log(bool);
                }}>
                    <ArrowLeftIcon></ArrowLeftIcon>
                    <p>{title}</p>
                    <ArrowRightIcon></ArrowRightIcon>
                </div>
            </div>
            <div className='xia'>
                <div className='zykm'>专业科目</div>
                {
                    subjectData.map((item: { title: string }, index) => {
                        return (
                            <div className='list' key={index} >
                                {item.title}
                            </div>
                        )
                    })
                }
            </div>

            <div className='xk' style={{ display: bool ? "block" : "none" }}>
                {
                    switchData.map((item: { actionCode: string; title: string; }, index) => {
                        return (
                            <button key={index} onClick={async () => {
                                // console.log(item.actionCode);
                                setCode(item.actionCode)
                                let res = await SubjectApi({
                                    actionCode: item.actionCode
                                })
                                // console.log(res.data);
                                subjectDataVal(res.data)
                                setBool(!bool)

                                setTitle(item.title)
                                // console.log(res.data);

                                setCode(item.actionCode)//当前学科
                                // console.log(item.actionCode);


                            }}>{item.title}</button>
                        )
                    })
                }
            </div>



        </div >




    )
}
